<template>
  <view>
    <scroll-view 
      class="move_scroll-container" 
      scroll-x 
      :scroll-left="scrollLeft"
      @scroll="onScroll"
      @touchstart="pauseScroll"
      @touchend="resumeScroll"
    >
      <view class="scroll-content">
        <!-- 原始内容 -->
        <view class="scroll-item" v-for="(item, index) in items" :key="'original-' + index">
          {{ item }}
        </view>
     
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      timer: null,
      scrollLeft: 0,
      scrollWidth: 0,
      itemWidth: 205,
      isPaused: false,
      isUserScrolling: false,
      speed: 1.5, // 控制滚动速度
      animationFrame: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initScroll()
    })
  },
  beforeDestroy() {
    if (this.animationFrame) {
      cancelAnimationFrame(this.animationFrame)
    }
  },
  methods: {
    initScroll() {
      const query = uni.createSelectorQuery().in(this)
      query.select('.scroll-content').boundingClientRect(data => {
        if (data) {
          this.scrollWidth = this.itemWidth * this.items.length
          this.startScroll()
        }
      }).exec()
    },
    startScroll() {
      if (this.animationFrame) {
        cancelAnimationFrame(this.animationFrame)
      }
      
      const animate = () => {
        if (!this.isPaused && !this.isUserScrolling) {
          this.scrollLeft += this.speed
          if (this.scrollLeft >= this.scrollWidth) {
            this.scrollLeft = 0
          }
          this.animationFrame = requestAnimationFrame(animate)
        }
      }
      
      this.animationFrame = requestAnimationFrame(animate)
    },
    pauseScroll() {
      this.isPaused = true
      this.isUserScrolling = true
      if (this.animationFrame) {
        cancelAnimationFrame(this.animationFrame)
      }
    },
    resumeScroll() {
      this.isUserScrolling = false
      setTimeout(() => {
        if (!this.isUserScrolling) {
          this.isPaused = false
          this.startScroll()
        }
      }, 2000)
    },
    onScroll(e) {
      if (this.isUserScrolling) {
        this.scrollLeft = e.detail.scrollLeft
        if (this.scrollLeft >= this.scrollWidth) {
          this.scrollLeft = 0
        }
      }
    }
  }
}
</script>

<style scoped>
.swiper-container {
  width: 100%;
  height: 100px;
  margin-bottom: 20px;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0 5px;
}

.move_scroll-container {
  width: 100%;
  height: 100px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.scroll-content {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform; /* 优化性能 */
}

.scroll-item {
  flex-shrink: 0;
  width: 200px;
  height: 100px;
  text-align: center;
  margin-right: 5px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  will-change: transform; /* 优化性能 */
}

/* 当重置位置时禁用过渡效果 */
.scroll-content.resetting {
  transition: none;
}
</style>